<template>
  <el-container class="main_con" >
    <div class="edit_con">
      <div class="edit_title">{{pageName}}</div>
      <div class="edit_content">
        <el-form size="medium" label-width="100px" ref="shForm" :model="obj" :rules="itemRules" class="edit_form">
          <el-form-item label="地址名称" prop="name">
            <el-input placeholder="请输入退货地址名称" v-model="obj.name"></el-input>
          </el-form-item>

          <el-form-item label="联系人" prop="linkman">
            <el-input placeholder="请输入联系人" v-model="obj.linkman"></el-input>
          </el-form-item>

          <el-form-item label="联系号码" prop="phone">
            <el-input placeholder="请输入手机号" v-model="obj.phone"></el-input>
          </el-form-item>

          <el-form-item label="固定电话">
            <el-input placeholder="请输入固定电话" v-model="obj.mobile"></el-input>
          </el-form-item>

          <el-form-item label="邮政编码">
            <el-input maxlength="6" placeholder="请输入邮政编码" v-model="obj.postcode"></el-input>
          </el-form-item>

          <el-form-item label="所在区域" prop="districtSelected">
            <el-cascader
              :options="options"
              v-model="obj.districtSelected"
              @change="districtSelect"
              ref="location"
              style="width:100%">
            </el-cascader>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input placeholder="请输入具体地址" v-model="obj.address"></el-input>
          </el-form-item>

          <!-- <el-form-item label="营业执照" prop="business_license">
            <Upload :tempUrl="obj.business_license" @input="getImage"></Upload>
          </el-form-item> -->

          <!-- <el-form-item label="默认">
            <el-radio-group v-model="obj.status">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item> -->
          
        </el-form>
      </div>
      <div class="edit_footer">
        <el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
// import Upload from '@/components/Upload/SingleImage';
import {regionData,CodeToText,TextToCode} from 'element-china-area-data'
import {
  addAddress,
  editAddress,
  getAddress
} from '@/api/shop/return';
export default {
  data(){
    //校验手机号码
    let validateMobile = (rule, value, callback) => {
      if (!(/^1[23456789]\d{9}$/.test(value))) {
        callback(new Error('手机号码有误，请重填'));
      } else {
        callback();
      }
    };

    return {
      obj:{
        name:'',
        linkman:'',
        phone:'',
        mobile:'',
        postcode:'',
        district:'',
        districtSelected: [],
        address:''
        //status:0
      },
      _obj:{},
      pageIsEdit:0,//0->新增,1->编辑
      pageName:'',
      indate:false,
      isLoading:false,
      options: regionData,
      itemRules: {
          name: [{
            required: true,
            message: '请输入退货地址名称'
          }],
          linkman: [{
            required: true,
            message: '请输入联系人'
          }],
          phone: [{
            required: true,
            validator: validateMobile
          }],
          districtSelected: [{
            type:'array',
            required: true,
            message:'请选择所在区域'
          }],
          address: [{
            required: true,
            message: '请输入具体地址'
          }]
          // business_license: [{
          //   required: true,
          //   trigger: 'change',
          //   message:'营业执照不能为空'
          // }],
        }
    }
  },
  components: {},
  created(){
    //获取路由参数(编辑时使用)
    if(this.$route.query.id){
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑退货地址'; 
      this.getItemData(this.$route.query.id);
    }else{
      this.pageIsEdit = 0;
      this.pageName = '新增退货地址'; 
      //this._obj = Object.assign({},this.obj);
    };

  },
  methods:{
    //获取编辑页面基础数据
    getItemData(id){
      this.isLoading = true;
      getAddress(id).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //this.obj = o;

        //处理所在区域
        let _d = [];
        let _t;
        if(o.district.indexOf(',') > -1){
          _t = o.district.split(',');
        }else{
          _t = o.district.split(' ');
        };
        //拼接所在区域选择数组
        _d[0] = TextToCode[_t[0]].code;
        _d[1] = TextToCode[_t[0]][_t[1]].code;
        _d[2] = TextToCode[_t[0]][_t[1]][_t[2]].code;
        o.districtSelected = _d;

        //赋值
        this.obj = Object.assign({},o);
      });
    },
    //获取图片
    // getImage(val) {
    //   this.obj.business_license = val;
    // },
    //级联选择区域
    districtSelect (value) {
      let s = '';
      value.forEach(e => {
        s += CodeToText[e] + ',';
      });
      s = s.substring(0,s.length - 1)
      //对象赋值
      this.obj.district = s;
    },
    //保存数据
    saveData(){
      let that = this;
      let _data = Object.assign({},this.obj);
      this.$refs.shForm.validate(valid => {
        if (valid) {
          //删除所在无用字段
          delete _data.districtSelected;

          //保存数据
          this.isLoading = true;
          switch(this.pageIsEdit){
            case 0:
              //新增
              addAddress(_data).then(res => {
                this.isLoading = false;
                //this.$refs.shForm.resetFields();
                //this.obj = Object.assign({},this._obj);
                this.$router.push('/product/freight/returnAddresslist');
              });
              break;
            case 1:
              //编辑
              //删除字段
              delete _data.status_text;
              editAddress(_data).then(res => {
                this.isLoading = false;
                //this.getItemData(this.$route.query.id);
                this.$router.push('/product/freight/returnAddresslist');
              });
              break;
            default:
              //no code
              break;
          };            
        } else {
          //console.log('error')
          return false
        }
      });

      
    }
  }
}
</script>

<style lang="scss" scoped></style>